<template>
	<view>
		<view class="body">
			<image class="logo" src="/static/img/logo@2x.png"></image>
			<image class="bg-set" src="/static/img/bjjb@2x.png"></image>
			<image class="indexbg" src="/static/img/indexbg.png"></image>
		</view>
		<view class="notice">
			<image class="noticelogo" src="/static/img/notice@2x.png"></image>
		</view>
		<view class="time">
			<text class="text">距开始预约时间还剩</text>

			<image class="timglogo" src="/static/img/time@2x.png"></image>
			<view class="timetext">
				<text class="text">02</text>
				<text class="text">30</text>
				<text class="text">21</text>
			</view>

		</view>
		<view class="rule">
				<image class="img" src="/static/img/sj@2x.png"></image>
			<view class="ruletext">
				<p class="p">
				一、盒子上面没有产品标注，只有打开盒子才会知道是什么礼品。你打开它，有可能是充电宝、耳机、游戏机、平板、手机...
				</p>
				<p class="p">
				二、现卡片共计有9种兑换方式，收集到不同的英雄卡片，可以兑换......
				</p>
			</view>
		</view>
	
	<view class="more">
			<image class="img" src="/static/img/lszs@2x.png"></image>
			<view class="text">盲盒部分惊喜产品</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		onLoad() {
			this.$api.getTime().then(res => {
				this.order = res.data
				console.log(res.data)
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.body {
		margin: 18rpx 29rpx;

		.bg-set {
			position: fixed;
			width: 100vw;
			height: 100vh;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.logo {
			height: 71rpx;
			width: 273rpx;

		}

		.indexbg {
			height: 378rpx;
			width: 690rpx;
		}

	}


	.notice {
		background-color: #ABE5DB;
		height: 53rpx;
		width: 750rpx;

		.noticelogo {
			height: 30rpx;
			width: 34rpx;
			margin: 12rpx 29rpx;
		}
	}

	.time {
		height: 260rpx;
		width: 689rpx;
		background-color: #E2FEFF;
		border-radius: 6% / 25% 25% 0 0;
		padding: 30rpx;
		margin-left: auto;
		margin-right: auto;

		.text {
			color: #008080;
			font-weight: 600;
			font-size: 30rpx;
		}

		.timglogo {
			height: 260rpx;
			width: 689rpx;
			margin-top: -120rpx;
			margin-left: -15rpx
		}

		.timetext{
			color: #FFFFFF;
			font-weight: 600;
			font-size: 48rpx;
			margin-left: -10rpx;
			margin-top: -100rpx;
			z-index: 9999;
			position:relative;
			.text{
				margin-left: 125rpx;
				color: #FFFFFF;
				font-size: 48rpx;
			}
		}
	}
.rule{
	margin-top: 30rpx;
	width: 689rpx;
	margin-left: auto;
	margin-right: auto;
	.img{
		margin-left: auto;
		margin-right: auto;
		height: 120rpx;
		width: 500rpx;
	}
	.ruletext{
		margin-top: -10rpx;
		height: 443rpx;
		width: 680rpx;
		background-color: #D5F1EC;
		box-shadow: 0px 5px 9px #D5F1EC;
		border-radius: 2em;
		padding: 50rpx;
		.p{
			text-indent: 30px;
			font-size: 22rpx;
		}
	}

}
.more{
	width: 689rpx;
	height: 689rpx;
	margin-top: 100rpx;
	margin-left: auto;
	margin-right: auto;
	.img{
		height: 78rpx;
		width: 523rpx;
	}
	.text{
		font-size: 36rpx;
		color: #008080;
		margin-left:30rpx;
		margin-top:-80rpx;
		z-index: 9999;
	}
}
</style>
